<script setup lang="ts">
import { PropType } from "vue";
import { pageInfoType, componentsMapType, CodeType } from "@/render/types";
// @ts-ignore
import { generateCode } from "@opentiny/tiny-engine-dsl-vue";
import { loadFileComponent } from "@/render/utils/vue-sfc-loader";

defineOptions({
  name: "AppRender",
});

const props = defineProps({
  pageInfo: {
    type: Object as PropType<pageInfoType>, default:()=> {}
  },
  componentsMap: {
    type: Array as PropType<componentsMapType[]>, default:()=> []
  },
  blocksData: {
    type: Array, default:()=> []
  }
})

const components = ref<any[]>([]);

onBeforeMount(()=>{
  const codeInfo = generateCode(props);
  if (codeInfo&&codeInfo.length>0){
    components.value =  codeInfo.filter((item: CodeType) => {
      return item.panelType === "vue";
    }).map((item: CodeType) => {
      return loadFileComponent(item.panelName, item.panelValue);
    });
  }
})

</script>

<template>
  <div class="app-render" v-if="components.length > 0">
    <template v-for="comp in components">
      <component :is="comp"></component>
    </template>
  </div>
</template>
